@mixin fullHW {
    height: 100%;
    width: 100%;
}
@mixin fullH {
    height: 100%;
}
@mixin fullW {
    width: 100%;
}
@mixin task-font {
    font-size: 14px;
    color: #fff;
}
@mixin pointer {
    cursor: pointer;
    user-select: none;
}
@mixin flex-shrink($num: 1) {
    flex-shrink: $num;
}
/**
    @doc 注释
 */
@mixin flex-grow($num: 1) {
    fle-grow: $num;
}
@mixin bgc-black {
    background-color: rgb(0, 0, 0);
}
@mixin opacity-background {
    background-color: rgba(0, 0, 0, 0.226);
}
@mixin opacity-background-light {
    background-color: rgba(0, 0, 0, 0.113);
}
@mixin opacity-background-red {
    background-color: rgba(255, 0, 0, 0.226);
}
@mixin opacity-background-red-light {
    background-color: rgba(255, 0, 0, 0.113);
}
@mixin opacity-background-dark {
    background-color: rgba(83, 83, 83, 0.616);
}
@mixin opacity-background-dark-light {
    background-color: rgba(83, 83, 83, 0.113);
}
@mixin opacity-background-blue {
    background-color: rgba(17, 0, 255, 0.226);
}
@mixin opacity-background-blue-light {
    background-color: rgba(17, 0, 255, 0.113);
}
@mixin opacity-background-func($color: red, $opacity: 0.3) {
    background: transparentize($color, $opacity);
}

@mixin flex-align-center-vh {
    display: flex;
    align-items: center;
    justify-content: center;
}
@mixin flex-align-center-h {
    display: flex;
    align-items: center;
}
@mixin flex-align-center {
    display: flex;
    justify-content: center;
    //align-items: center;
}
@mixin flex-align-center-left {
    display: flex;
    align-items: center;
    justify-content: left;
}
@mixin border-radius-5 {
    border-radius: 5px;
}
@mixin border-radius-5-top {
    border-radius: 5px;
}
@mixin border-radius($radius: 5px, $pos: null) {
    @if $pos==null {
        border-radius: $radius;
    } @else if $pos==top {
        // border-radius: $radius;
        border-radius: $radius $radius 0 0;
    } @else if $pos==bottom {
        // border-radius: $radius;
        border-radius: 0 0 $radius $radius;
    } @else if $pos==left {
        // border-radius: $radius;
        border-radius: $radius 0 0 $radius;
    } @else if $pos==right {
        // border-radius: $radius;
        border-radius: 0 $radius $radius 0;
    }
}

@mixin task-border {
    border: 1px solid rgb(228, 228, 228);
    @include border-radius-5();
}
@mixin base-box-shadow {
    box-shadow: rgb(160, 160, 160) 1px 1px 6px;
}
@mixin base-box-shadow-6 {
    box-shadow: rgb(160, 160, 160) 1px 1px 6px;
}
@mixin base-box-shadow-3 {
    box-shadow: rgb(159, 160, 160) 0px 0px 3px;
}
@mixin base-box-shadow-10 {
    box-shadow: rgb(255, 255, 255) 0 0 10px;
}
@mixin base-box-shadow-15 {
    box-shadow: rgb(255, 255, 255) 0 0 15px;
}
@mixin hover-move($pixel: 2px) {
    transform: translate($pixel, $pixel);
}

@mixin animate_trans($keyword: all, $time: 0.2s) {
    transition: $keyword, $time;
}

@mixin dev-border-1($dev: false) {
    @if ($dev==true) {
        border: 1px solid #000;
        box-sizing: border-box;
    }
}

@mixin winHeight {
    height: 85vh;
}
@mixin flex-base {
    display: flex;
}
@mixin flex-ver {
    @include flex-base;
    flex-direction: row;
}

@mixin flex-ver-center {
    @include flex-ver;
    justify-content: center;
}
@mixin flex-hor {
    @include flex-base;
}
@mixin flex-hor-center {
    @include flex-base;
    flex-direction: column;
}
